<template>
  <div class="el-table__body-wrapper">
    <!--    查询条件-->
    <div class="search-form search_form" v-loading='loadingPage'>
      <el-form :model="searchForm" size="mini" label-position="right" class="demo-form-inline" label-width="110px">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item label="部门名称：" prop="deptId">
              <el-select v-model="searchForm.deptId" placeholder="请选择部门" filterable clearable
              >
                <el-option
                  v-for="item  in  deptList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>


          <el-col :span="5">
            <el-form-item label="月份：" prop="createTime">
              <el-date-picker
                v-model="searchForm.createTime"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择月">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6" style="text-align:center;">
            <el-button size="mini" type="primary" @click="searchBtn">查询</el-button>
            <el-button size="mini" @click="emptyClick">清空</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-col :span="8" style="text-align:left;">
        <el-button v-hasPermi="['/performanceofficeother/export']" size="mini" type="success" @click="exportForm"
                   :disabled="this.checkedArr.length <= 0">导出
        </el-button>
      </el-col>
    </div>
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      @selection-change="handleSelectionChange"
      @sort-change="getOrder"
      :row-key="bindRowKeys"
      style="width: 100%;">

      <el-table-column
        prop="deptName"
        header-align="center"
        align="center"
        label="部门名称"
        width="130">
      </el-table-column>
      <el-table-column
        prop="calculateNum"
        header-align="center"
        align="center"
        label="计算人数">
      </el-table-column>
      <el-table-column
        prop="implementOrder"
        header-align="center"
        align="center"
        label="执行命令">
      </el-table-column>
      <el-table-column
        prop="principalNum"
        header-align="center"
        align="center"
        label="负责人">
      </el-table-column>
      <el-table-column
        prop="ordinaryNum"
        header-align="center"
        align="center"
        label="普通员工">
      </el-table-column>
      <el-table-column
        prop="manageNum"
        header-align="center"
        align="center"
        label="管理技术岗">
      </el-table-column>
      <el-table-column
        prop="lastMonthBalanceAAdd"
        header-align="center"
        align="center"
        label="上个月结余A+">
      </el-table-column>
      <el-table-column
        prop="lastMonthBalanceA"
        header-align="center"
        align="center"
        label="上个月结余A">
      </el-table-column>
      <el-table-column
        prop="lastMonthBalanceBAdd"
        header-align="center"
        align="center"
        label="上个月结余B+">
      </el-table-column>
      <el-table-column
        prop="lastMonthBalanceC"
        header-align="center"
        align="center"
        label="上个月结余C">
      </el-table-column>
      <el-table-column
        prop="thisMonthCountAAdd"
        header-align="center"
        align="center"
        label="本月计算数A+">
      </el-table-column>
      <el-table-column
        prop="thisMonthCountA"
        header-align="center"
        align="center"
        label="本月计算数A">
      </el-table-column>
      <el-table-column
        prop="thisMonthCountBAdd"
        header-align="center"
        align="center"
        label="本月计算数B+">
      </el-table-column>
      <el-table-column
        prop="thisMonthCountC"
        header-align="center"
        align="center"
        label="本月计算数C">
      </el-table-column>
      <el-table-column
        prop="canAllocationAAdd"
        header-align="center"
        align="center"
        label="本月实际可分配人数A+"
        width="120">
      </el-table-column>
      <el-table-column
        prop="canAllocationA"
        header-align="center"
        align="center"
        label="本月实际可分配人数A"
        width="120">
      </el-table-column>
      <el-table-column
        prop="canAllocationBAdd"
        header-align="center"
        align="center"
        label="本月实际可分配人数B+"
        width="120">
      </el-table-column>
      <el-table-column
        prop="canAllocationC"
        header-align="center"
        align="center"
        label="本月实际可分配人数C"
        width="120">
      </el-table-column>
      <el-table-column
        prop="peopleAAboveNum"
        header-align="center"
        align="center"
        label="其中管理技术人员A 以上数量"
        width="120">
      </el-table-column>
      <el-table-column
        prop="thisMonthBalanceAAdd"
        header-align="center"
        align="center"
        label="本月结余尾数A+">
      </el-table-column>
      <el-table-column
        prop="thisMonthBalanceA"
        header-align="center"
        align="center"
        label="本月结余尾数A">
      </el-table-column>
      <el-table-column
        prop="thisMonthBalanceBAdd"
        header-align="center"
        align="center"
        label="本月结余尾数B+">
      </el-table-column>
      <el-table-column
        prop="thisMonthBalanceC"
        header-align="center"
        align="center"
        label="本月结余尾数C">
      </el-table-column>
      <el-table-column
        prop="monthAllocationAAdd"
        header-align="center"
        align="center"
        label="本月实际分配人数A+"
        width="90">
      </el-table-column>
      <el-table-column
        prop="monthAllocationA"
        header-align="center"
        align="center"
        label="本月实际分配人数A"
        width="90">
      </el-table-column>
      <el-table-column
        prop="monthAllocationBAdd"
        header-align="center"
        align="center"
        label="本月实际分配人数B+"
        width="90">
      </el-table-column>
      <el-table-column
        prop="monthAllocationC"
        header-align="center"
        align="center"
        label="本月实际分配人数C"
        width="90">
      </el-table-column>

      <el-table-column
        prop="totalScore"
        header-align="center"
        align="center"
        label="总系数"
        width="120">
      </el-table-column>
      <el-table-column
        prop="overallRating"
        header-align="center"
        align="center"
        label="实际实数"
        width="120">
      </el-table-column>

      <el-table-column
        prop="state"
        header-align="center"
        align="center"
        label="状态">
        <template slot-scope="scope">
          <span style="color: #13ce66; ;font-weight:bold" v-if="scope.row.state === 0">未审核</span>
          <span style="color: #ff4949; ;font-weight:bold" v-if="scope.row.state === 1">已审核</span>
          <span style="color: #13ce66; ;font-weight:bold" v-if="scope.row.state === 2">已提交</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="时间"
        width="150">
        <template slot-scope="scope">
          {{ new Date(scope.row.createTime).toLocaleDateString().replaceAll('/', '-') }}
        </template>
      </el-table-column>
    </el-table>
    <div class="progress_lok_page">
      <page
        :hidden="tableData && tableData.length === 0"
        :total="total"
        :page.sync="pageNo"
        :limit.sync="pageSize"
        @pagination="handlePageChange"
      />
    </div>
  </div>
</template>

<script>


  import axios from 'axios'
  import { Encrypt } from '../../utils/cryptoAES'
  import { AesDecrypt } from '../../utils/AesDecrypt'

  export default {
    data() {
      return {
        deptList: [],
        tableData: [],
        loadingPage: true,
        loading: true,
        currentPage: 0,
        pageNo: 1,
        pageSize: 10,
        total: 0,
        checkedArr: [],//要导出的数据数组
        ids: [],
        searchForm: {
          deptId: '',//部门
          appealUser: '',//申诉人
          state: 2,
          createTime: ''
        },
        stateOptions: [{
          value: null,
          label: '全部'
        }, {
          value: 0,
          label: '未审核'
        }, {
          value: 1,
          label: '已审核'
        }, {
          value: 2,
          label: '已提交'
        }]
      }
    },
    created() {
      this.getList ()
      this.getDeptList ()

    },
    methods: {

      // 获取列表
      getList() {
        var uu = {
          page: this.pageNo,
          pageSize: this.pageSize,
          deptId: this.searchForm.deptId,//部门ID
          state: this.searchForm.state,//绩效管理委员会默认只查看已提交的
          createTime: this.searchForm.createTime
        }
        var jsonString = JSON.stringify (uu)
        var yy = Encrypt (jsonString)
        var encodedString = encodeURIComponent (yy)
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/performanceoffice/list',
          data: encodedString
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            var data = AesDecrypt (data.result)
            this.tableData = data.result.content
            this.total = data.result.total
            this.loading = false
            this.loading = false
            this.loadingPage = false
          } else {
            this.loading = false
            this.loadingPage = false
            this.$message.error (data.msg)
            this.tableData = []
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },
// 导出
      async exportForm() {
        this.loadingPage = true
        this.ids = []
        if (this.checkedArr.length != 0) {
          this.checkedArr.forEach (item => {
            this.ids.push (item.id)
          })
        } else {
          this.ids = []
        }
        axios ({
          method: 'post',
          responseType: 'blob',
          url: '/hr-xc-human-resources-perform-manage/generator/performanceoffice/export',
          data: {
            ids: this.searchForm.ids,
            deptName: this.searchForm.deptName,//部门
            createTime: this.searchForm.createTime
          }
        }).then (({ data }) => {
          if (data.size) {
            const downloadElement = document.createElement ('a')
            const href = window.URL.createObjectURL (data) // 创建下载的链接
            downloadElement.href = href
            downloadElement.download = decodeURI ('绩效管理委员会.xls') // 下载后文件名
            document.body.appendChild (downloadElement)
            downloadElement.click () // 点击下载
            document.body.removeChild (downloadElement) // 下载完成移除元素
            window.URL.revokeObjectURL (href) // 释放掉blob对象
            this.loadingPage = false
            // this.$my_message.success ('导出成功')
            this.$message.success ('导出成功')
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },
      // 搜索
      searchBtn() {
        this.loading = true
        this.pageNo = 1
        this.getList ()
      },
      // 清空
      emptyClick() {
        this.searchForm.deptId = '',//部门ID
          this.searchForm.deptId = '',
          this.searchForm.createTime = ''
      },

      /** 点击分页触发的事件 */
      handlePageChange(pageInfo) {
        this.loading = true
        this.pageNo = pageInfo.page
        this.pageSize = pageInfo.limit
        this.getList ()
      },
      bindRowKeys(row) {
        return row.id
      },
      // 多选
      handleSelectionChange(value) {
        this.checkedArr = value
        // element表格多选第一页选中往后翻一页全选，再回到第一页会再次选中第一页的数据，所以需要手动去重
        let hash = {}
        this.checkedArr = this.checkedArr.reduce ((preVal, curVal) => {
          hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push (curVal)
          return preVal
        }, [])
        // console.log(this.checkedArr,'this.checkedArr')
      },
      getOrder(param) {
        this.loading = true
        if (param.order === 'ascending') {
          this.searchForm.sort = 'asc'
          this.searchForm.sortField = param.prop
        } else if (param.order === 'descending') {
          this.searchForm.sort = 'desc'
          this.searchForm.sortField = param.prop
        } else {
          this.searchForm.sort = ''
          this.searchForm.sortField = ''
        }
        this.getList ()
      },
      getDeptList() {
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/torgdept/queryAllDeptIdAndName'
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            var data = AesDecrypt (data.result)
            this.deptList = data
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      }
    }
  }
</script>
<style>
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 8px; /*滚动条宽度*/
    height: 8px; /*滚动条高度*/
  }

  .el-table__body-wrapper::-webkit-scrollbar-track {
    border-radius: 10px; /*滚动条的背景区域的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
    background-color: #eeeeee; /*滚动条的背景颜色*/
  }

  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px; /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
    background-color: rgb(145, 143, 143); /*滚动条的背景颜色*/
  }
</style>
